<template>
  <div class="inventory-container">
    <!-- 左侧统计查询区域 -->
    <div class="left-section">
      <div class="statistical-inquiry">
        <h2 class="section-title">统计查询 <span class="subtitle">Statistical inquiry</span></h2>
        
        <div class="query-form">
          <el-form :inline="true" label-width="90px">
            <el-form-item label="查询品名：">
              <el-input v-model="query.productName" placeholder="A_001品名"></el-input>
            </el-form-item>
            <el-form-item label="查询规格：">
              <el-input v-model="query.specification" placeholder="规格_001"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search">查询</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div class="inventory-summary">
          <div class="summary-item">
            <div class="label">入库总数</div>
            <div class="value">59</div>
          </div>
          <div class="summary-item">
            <div class="label">出库总数</div>
            <div class="value">47</div>
          </div>
          <div class="summary-item">
            <div class="label">现有库存</div>
            <div class="value">12</div>
          </div>
        </div>

        <div class="calendar-section">
          <div class="calendar-header">
            <el-button icon="el-icon-arrow-left" circle></el-button>
            <span class="month-year">2022年01月</span>
            <el-button icon="el-icon-arrow-right" circle></el-button>
          </div>
          
          <div class="calendar-weekdays">
            <div v-for="day in weekdays" :key="day" class="weekday">{{ day }}</div>
          </div>
          
          <div class="calendar-days">
            <div 
              v-for="day in calendarDays" 
              :key="day.date" 
              class="day"
              :class="{
                'in-day': day.type === 'in',
                'out-day': day.type === 'out',
                'both-day': day.type === 'both'
              }"
            >
              {{ day.date }}
            </div>
          </div>
        </div>

        <div class="legend">
          <div class="legend-item">
            <div class="color-box in-color"></div>
            <span>入库</span>
          </div>
          <div class="legend-item">
            <div class="color-box out-color"></div>
            <span>出库</span>
          </div>
          <div class="legend-item">
            <div class="color-box both-color"></div>
            <span>入库+出库</span>
          </div>
        </div>

        <div class="summary-details">
          <div class="date-range">
            <span>开始日期：2022/01/01</span>
            <span>结束日期：2022/04/02</span>
          </div>
          <div class="product-info">
            <span>品名：A_001品名</span>
            <span>规格：规格_001</span>
          </div>
          <div class="stats">
            <div class="stat">
              <span class="label">入库数量</span>
              <span class="value">59</span>
              <span class="record">记录：2</span>
            </div>
            <div class="stat">
              <span class="label">出库数量</span>
              <span class="value">47</span>
              <span class="record">记录：2</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧库存管理区域 -->
    <div class="right-section">
      <div class="dashboard">
        <div class="dashboard-header">
          <h2>库存</h2>
          <div class="warehouse-select">
            <el-select v-model="selectedWarehouse" placeholder="选择仓库">
              <el-option label="全部仓库" value="all"></el-option>
              <el-option label="主仓库" value="main"></el-option>
              <el-option label="备用仓库" value="backup"></el-option>
            </el-select>
          </div>
        </div>

        <div class="operation-cards">
          <div class="operation-card">
            <h3>入库作业</h3>
            <div class="date-range">2023-01-08 - 2023-01-09</div>
            <div class="stats">
              <div class="stat">
                <span class="label">未完成单数：</span>
                <span class="value">0</span>
              </div>
              <div class="stat">
                <span class="label">已完成单数：</span>
                <span class="value">0</span>
              </div>
              <div class="stat">
                <span class="label">收货预告：</span>
                <span class="value">0</span>
              </div>
            </div>
            <div class="chart-placeholder"></div>
          </div>

          <div class="operation-card">
            <h3>出库作业</h3>
            <div class="date-range">2023-01-08 - 2023-01-09</div>
            <div class="stats">
              <div class="stat">
                <span class="label">未完成单数：</span>
                <span class="value">0</span>
              </div>
              <div class="stat">
                <span class="label">已完成单数：</span>
                <span class="value">0</span>
              </div>
              <div class="stat">
                <span class="label">发货预告：</span>
                <span class="value">0</span>
              </div>
            </div>
            <div class="chart-placeholder"></div>
          </div>

          <div class="operation-card">
            <h3>复核作业</h3>
            <div class="date-range">2023-01-08 - 2023-01-09</div>
            <div class="stats">
              <div class="stat">
                <span class="label">未完成单数：</span>
                <span class="value">0</span>
              </div>
              <div class="stat">
                <span class="label">已完成单数：</span>
                <span class="value">0</span>
              </div>
              <div class="stat">
                <span class="label">发货预告：</span>
                <span class="value">0</span>
              </div>
            </div>
            <div class="chart-placeholder"></div>
          </div>
        </div>

        <div class="ranking-section">
          <div class="ranking-card">
            <div class="card-header">
              <h3>作业排行榜Top5</h3>
              <span class="date-range">2023-01-08 - 2023-01-09</span>
              <el-button type="text">更多</el-button>
            </div>
            <div class="ranking-chart">
              <div class="ranking-item" v-for="(item, index) in rankingData" :key="index">
                <span class="rank">{{ index + 1 }}</span>
                <span class="name">{{ item.name }}</span>
                <span class="count">{{ item.count }}</span>
              </div>
            </div>
          </div>
        </div>

        <div class="warning-section">
          <div class="warning-card">
            <h3>库存预警</h3>
            <div class="warning-items">
              <div class="warning-item">
                <span class="label">近效期单品种数</span>
                <span class="value">28</span>
              </div>
              <div class="warning-item">
                <span class="label">缺货单品种数</span>
                <span class="value">5</span>
              </div>
              <div class="warning-item">
                <span class="label">待补货的品种数</span>
                <span class="value">12</span>
              </div>
            </div>
          </div>
        </div>

        <div class="product-sections">
          <div class="product-card">
            <div class="card-header">
              <h3>热销药品Top5</h3>
              <div class="date-select">
                <el-select v-model="hotSalesDate" placeholder="选择日期">
                  <el-option label="2022-07" value="2022-07"></el-option>
                  <el-option label="2023-01" value="2023-01"></el-option>
                </el-select>
                <el-button type="text">更多</el-button>
              </div>
            </div>
            <div class="product-list">
              <div class="product-item" v-for="(product, index) in hotProducts" :key="index">
                <span class="rank">{{ index + 1 }}</span>
                <span class="name">{{ product.name }}</span>
                <span class="sales">{{ product.sales }}</span>
              </div>
            </div>
          </div>

          <div class="product-card">
            <div class="card-header">
              <h3>滞销药品Top5</h3>
              <div class="date-select">
                <el-select v-model="slowSalesDate" placeholder="选择日期">
                  <el-option label="2022-07" value="2022-07"></el-option>
                  <el-option label="2023-01" value="2023-01"></el-option>
                </el-select>
                <el-button type="text">更多</el-button>
              </div>
            </div>
            <div class="product-list">
              <div class="product-item" v-for="(product, index) in slowProducts" :key="index">
                <span class="rank">{{ index + 1 }}</span>
                <span class="name">{{ product.name }}</span>
                <span class="sales">{{ product.sales }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Inventory',
  data() {
    return {
      query: {
        productName: '',
        specification: ''
      },
      weekdays: ['一', '二', '三', '四', '五', '六', '日'],
      calendarDays: [
        { date: '01', type: '' },
        { date: '02', type: '' },
        { date: '03', type: 'in' },
        { date: '04', type: 'out' },
        { date: '05', type: 'both' },
        { date: '06', type: '' },
        { date: '07', type: '' },
        { date: '08', type: '' },
        { date: '09', type: '' },
        { date: '10', type: 'in' },
        { date: '11', type: 'out' },
        { date: '12', type: 'both' },
        { date: '13', type: '' },
        { date: '14', type: '' },
        { date: '15', type: '' },
        { date: '16', type: '' },
        { date: '17', type: 'in' },
        { date: '18', type: 'out' },
        { date: '19', type: 'both' },
        { date: '20', type: '' },
        { date: '21', type: '' },
        { date: '22', type: '' },
        { date: '23', type: '' },
        { date: '24', type: 'in' },
        { date: '25', type: 'out' },
        { date: '26', type: 'both' },
        { date: '27', type: '' },
        { date: '28', type: '' },
        { date: '29', type: '' },
        { date: '30', type: '' },
        { date: '31', type: 'in' }
      ],
      selectedWarehouse: 'all',
      rankingData: [
        { name: '上架', count: 120 },
        { name: '拣货', count: 98 },
        { name: '复核', count: 75 },
        { name: '包装', count: 60 },
        { name: '发货', count: 45 }
      ],
      hotSalesDate: '2023-01',
      slowSalesDate: '2023-01',
      hotProducts: [
        { name: '药品A', sales: 120 },
        { name: '药品B', sales: 98 },
        { name: '药品C', sales: 75 },
        { name: '药品D', sales: 60 },
        { name: '药品E', sales: 45 }
      ],
      slowProducts: [
        { name: '药品X', sales: 5 },
        { name: '药品Y', sales: 8 },
        { name: '药品Z', sales: 12 },
        { name: '药品W', sales: 15 },
        { name: '药品V', sales: 18 }
      ]
    };
  }
};
</script>

<style lang="less" scoped>
.inventory-container {
  display: flex;
  // height: 100vh;
  overflow: hidden;

  .left-section {
    width: 35%;
    padding: 20px;
    border-right: 1px solid #e6e6e6;
    overflow-y: auto;

    .statistical-inquiry {
      .section-title {
        font-size: 18px;
        color: #333;
        margin-bottom: 20px;

        .subtitle {
          font-size: 14px;
          color: #999;
          margin-left: 10px;
        }
      }

      .query-form {
        margin-bottom: 20px;

        /deep/ .el-form-item {
          margin-bottom: 15px;
        }
      }

      .inventory-summary {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;

        .summary-item {
          text-align: center;
          flex: 1;

          .label {
            font-size: 14px;
            color: #666;
            margin-bottom: 5px;
          }

          .value {
            font-size: 24px;
            font-weight: bold;
            color: #409EFF;
          }
        }
      }

      .calendar-section {
        margin-bottom: 20px;

        .calendar-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 15px;

          .month-year {
            font-size: 16px;
            font-weight: bold;
          }
        }

        .calendar-weekdays {
          display: grid;
          grid-template-columns: repeat(7, 1fr);
          text-align: center;
          margin-bottom: 10px;

          .weekday {
            font-size: 14px;
            color: #666;
          }
        }

        .calendar-days {
          display: grid;
          grid-template-columns: repeat(7, 1fr);
          gap: 5px;

          .day {
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 4px;
            background-color: #f5f7fa;

            &.in-day {
              background-color: rgba(103, 194, 58, 0.2);
              color: #67c23a;
            }

            &.out-day {
              background-color: rgba(245, 108, 108, 0.2);
              color: #f56c6c;
            }

            &.both-day {
              background-color: rgba(230, 162, 60, 0.2);
              color: #e6a23c;
            }
          }
        }
      }

      .legend {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;

        .legend-item {
          display: flex;
          align-items: center;
          margin: 0 10px;

          .color-box {
            width: 16px;
            height: 16px;
            margin-right: 5px;
            border-radius: 3px;

            &.in-color {
              background-color: rgba(103, 194, 58, 0.2);
            }

            &.out-color {
              background-color: rgba(245, 108, 108, 0.2);
            }

            &.both-color {
              background-color: rgba(230, 162, 60, 0.2);
            }
          }
        }
      }

      .summary-details {
        .date-range, .product-info {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
          font-size: 14px;
          color: #666;
        }

        .stats {
          display: flex;
          justify-content: space-between;

          .stat {
            text-align: center;
            flex: 1;

            .label {
              display: block;
              font-size: 14px;
              color: #666;
              margin-bottom: 5px;
            }

            .value {
              display: block;
              font-size: 18px;
              font-weight: bold;
              color: #409EFF;
            }

            .record {
              display: block;
              font-size: 12px;
              color: #999;
              margin-top: 3px;
            }
          }
        }
      }
    }
  }

  .right-section {
    width: 65%;
    padding: 20px;
    overflow-y: auto;

    .dashboard {
      .dashboard-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        h2 {
          font-size: 18px;
          color: #333;
        }
      }

      .operation-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        margin-bottom: 20px;

        .operation-card {
          background-color: #fff;
          border-radius: 4px;
          padding: 15px;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

          h3 {
            font-size: 16px;
            color: #333;
            margin-bottom: 10px;
          }

          .date-range {
            font-size: 12px;
            color: #999;
            margin-bottom: 10px;
          }

          .stats {
            .stat {
              margin-bottom: 5px;
              font-size: 14px;

              .label {
                color: #666;
              }

              .value {
                color: #409EFF;
                font-weight: bold;
              }
            }
          }

          .chart-placeholder {
            height: 60px;
            background-color: #f5f7fa;
            border-radius: 4px;
            margin-top: 10px;
          }
        }
      }

      .ranking-section {
        margin-bottom: 20px;

        .ranking-card {
          background-color: #fff;
          border-radius: 4px;
          padding: 15px;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

          .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;

            h3 {
              font-size: 16px;
              color: #333;
            }

            .date-range {
              font-size: 12px;
              color: #999;
            }
          }

          .ranking-chart {
            .ranking-item {
              display: flex;
              align-items: center;
              padding: 8px 0;
              border-bottom: 1px solid #eee;

              &:last-child {
                border-bottom: none;
              }

              .rank {
                width: 24px;
                height: 24px;
                background-color: #409EFF;
                color: #fff;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 12px;
                margin-right: 10px;
              }

              .name {
                flex: 1;
                font-size: 14px;
              }

              .count {
                font-size: 14px;
                font-weight: bold;
                color: #409EFF;
              }
            }
          }
        }
      }

      .warning-section {
        margin-bottom: 20px;

        .warning-card {
          background-color: #fff;
          border-radius: 4px;
          padding: 15px;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

          h3 {
            font-size: 16px;
            color: #333;
            margin-bottom: 15px;
          }

          .warning-items {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;

            .warning-item {
              text-align: center;
              padding: 15px;
              background-color: #f5f7fa;
              border-radius: 4px;

              .label {
                display: block;
                font-size: 14px;
                color: #666;
                margin-bottom: 5px;
              }

              .value {
                display: block;
                font-size: 24px;
                font-weight: bold;
                color: #f56c6c;
              }
            }
          }
        }
      }

      .product-sections {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;

        .product-card {
          background-color: #fff;
          border-radius: 4px;
          padding: 15px;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

          .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;

            h3 {
              font-size: 16px;
              color: #333;
            }

            .date-select {
              display: flex;
              align-items: center;

              /deep/ .el-select {
                width: 120px;
                margin-right: 10px;
              }
            }
          }

          .product-list {
            .product-item {
              display: flex;
              align-items: center;
              padding: 8px 0;
              border-bottom: 1px solid #eee;

              &:last-child {
                border-bottom: none;
              }

              .rank {
                width: 24px;
                height: 24px;
                background-color: #409EFF;
                color: #fff;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 12px;
                margin-right: 10px;
              }

              .name {
                flex: 1;
                font-size: 14px;
              }

              .sales {
                font-size: 14px;
                font-weight: bold;
                color: #409EFF;
              }
            }
          }
        }
      }
    }
  }
}

// 响应式调整
@media (max-width: 1200px) {
  .inventory-container {
    flex-direction: column;
    height: auto;
    min-height: 100vh;

    .left-section, .right-section {
      width: 100%;
      height: auto;
    }
  }
}

@media (max-width: 768px) {
  .inventory-container {
    .left-section, .right-section {
      padding: 10px;
    }

    .right-section {
      .operation-cards {
        grid-template-columns: 1fr;
      }

      .product-sections {
        grid-template-columns: 1fr;
      }
    }
  }
}
</style>